<template>
    <!-- 统计数据 -->
    <div class="bg">
        <div>
            <span class="line">|</span>
            审批统计
        </div>
        <div class="outer">
            <div class="statisticsCard" v-for="item in statistics" :key="item.text">
                <div class="pic">
                    <img class="picIcon" :src="item.pic" :alt="item.text">
                </div>
                <span class="stext">{{ item.text }}</span>
                <span class="snum">{{ item.num }}</span>
            </div>
        </div>
    </div>
    <!-- 评论数据表格 -->
    <el-table :data="commentList" stripe style="width: 100%; margin-bottom:10px;">
        <el-table-column prop="id" label="ID" align="center" />
        <el-table-column prop="comment" label="评论内容" align="center">
            <template #default="scope">
                <el-tooltip :content="scope.row.comment" placement="top">
                    <el-text truncated>
                        {{ scope.row.comment }}
                    </el-text>
                </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column prop="publish_time" label="提交时间" align="center" />
        <el-table-column prop="author" label="发布者" align="center" />
        <el-table-column prop="is_published" label="审核状态" align="center">
            <template #default="scope">
                <el-tag type="warning" effect="dark" v-if="scope.row.is_published === 0">待审批</el-tag>
                <el-tag type="success" effect="dark" v-if="scope.row.is_published === 1">已通过</el-tag>
                <el-tag type="danger" effect="dark" v-if="scope.row.is_published === 2">已驳回</el-tag>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
            <template #default="scope">
                <el-popconfirm title="您确定要驳回该评论吗?" @confirm="handleApproval(scope.row, 2)">
                    <template #reference>
                        <el-button :disabled="scope.row.is_published !== 0" link type="primary"
                            size="small">驳回</el-button>
                    </template>
                </el-popconfirm>
                <el-popconfirm title="您确定要通过该评论吗?" @confirm="handleApproval(scope.row, 1)">
                    <template #reference>
                        <el-button :disabled="scope.row.is_published !== 0" link type="primary"
                            size="small">通过</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination background layout="prev, ->,jumper,pager, next" :total="total" :page-size="9"
        v-model:current-page="currentPage" @current-change="changePage" />
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import approval from "../../icons/approval.svg";
import passed from "../../icons/passed.svg";
import aborted from "../../icons/aborted.svg";
import { ElMessage } from "element-plus";
import { useUserStore } from "../../store/useUserStore.js";
import { storeToRefs } from "pinia";

// 统计数据
const statistics = ref([
    {
        text: "待审批",
        pic: approval,
        num: "0",
    },
    {
        text: "已驳回",
        pic: aborted,
        num: "0",
    },
    {
        text: "已通过",
        pic: passed,
        num: "0",
    },
])
// 获取评论列表
const commentList = ref([]);
const allTableData = ref([]);

const getCommentList = async () => {
    const res = await axios.get("/oasadapi/comment");
    allTableData.value = res.data;
    // console.log(allTableData.value);
    commentList.value = allTableData.value.slice((currentPage.value - 1) * 9, currentPage.value * 9);
    total.value = res.data.length;
    statistics.value[0].num = 0;
    statistics.value[1].num = 0;
    statistics.value[2].num = 0;
    res.data.forEach(element => {
        if (element.is_published === 0) {
            statistics.value[0].num++;
        } else if (element.is_published === 1) {
            statistics.value[2].num++;
        } else {
            statistics.value[1].num++;
        }
    });
}

// 分页器
let total = ref(10);
let currentPage = ref(1);
const changePage = () => {
    commentList.value = allTableData.value.slice((currentPage.value - 1) * 9, currentPage.value * 9);
}

// 初始化
onMounted(
    () => {
        getCommentList();
    }
)
// 用户信息
const userStore = useUserStore();
const { user } = storeToRefs(userStore);
// 发送消息结构体
const notice = ref({
    notice: "",
    user_name: "",
    user_id: "",
    post_time: "",
    post_from: user.value.user_name,
})
// 审批评论
const approvalData = ref({
    id: "",
    status: "",
})
const handleApproval = async (data, approvalStatus) => {
    approvalData.value.id = data.id;
    approvalData.value.status = approvalStatus;
    await axios.post(`/oasadapi/comment/approval`, approvalData.value).then((res) => {
        if (res.data.code === 0) {
            if (approvalData.value.status === 1) {
                notice.value.notice = "您的评论已发布，再接再厉哦，快去看看吧！"
                ElMessage({
                    message: "已通过评论！",
                    type: "success"
                })
            } else {
                notice.value.notice = "您的评论涉嫌违规，已被驳回，请注意！"
                ElMessage({
                    message: "已驳回评论！",
                    type: "success"
                })
            }
            notice.value.user_name = data.author;
            axios.post(`/oasadapi/notice`, notice.value);
        } else {
            ElMessage({
                message: "审批失败！",
                type: "error"
            })
        }
        getCommentList();
    })
}

</script>

<style lang="scss" scoped>
.bg {
    background: #ecf5ff;
    padding: 10px;
    border-radius: 20px;
    margin-bottom: 20px;

    .line {
        width: 4px;
        height: 10px;
        background: #79bbff;
        color: #79bbff;
    }
}

.outer {
    display: flex;
    justify-content: space-around;

    .statisticsCard {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 25px;
        cursor: default;

        .pic {
            width: 70px;
            height: 100px;

            .picIcon {
                width: 70px;
                height: 100px;
            }
        }

        .stext {
            margin-top: 10px;
            margin-bottom: 10px;
        }
    }
}
</style>